<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Slog</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="/favicon.png" />
    <link rel="bookmark" href="/favicon.png" />
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="m-form">
        <form name="" action="#" method="get">
            <fieldset>
                <legend>Slog 配置</legend>
                <div class="formitm">
                    <label class="lab">Host：</label>
                    <div class="ipt">
                        <input type="text" id="host" class="u-ipt" value="121.40.127.52" />
                        <p>WebSocket 服务器域名或IP</p>
                    </div>
                </div>
                <div class="formitm">
                    <label class="lab">Port：</label>
                    <div class="ipt">
                        <input type="text" id="port" class="u-ipt" value="9009" />
                        <p>WebSocket 服务监听端口</p>
                    </div>
                </div>
                <div class="formitm">
                    <label class="lab">ID：</label>
                    <div class="ipt">
                        <input type="text" id="cid" class="u-ipt" value="lionly" />
                        <p>客户端身份标识</p>
                    </div>
                </div>
                <div class="formitm formitm-1">
                    <button class="u-btn" type="button" onclick="openFn();">打开日志</button>
                    <button class="u-btn u-btn-c1" type="button" onclick="aardio.quit()">点这里退出</button>
                    <p id="status">---</p>
                </div>
            </fieldset>
        </form>
    </div>
    <br>
</body>
<script src="/aardio.js">
//aardio <--> chrome 通信接口准备就绪则执行这里的JS脚本
</script>
<script>
aardio.on("init", (c) => {
    for (k in c) {
        let o = document.getElementById(k)
        if (o) {
            o.value = c[k]
        }
    }
})
aardio.on("log", (logs) => {
    if ('object' != typeof(logs)) {
        return;
    }
    logs.forEach(function(log) {
        if (console[log.type]) {
            if (log.css) {
                console[log.type]('%c' + log.msg, log.css);
            } else {
                console[log.type](log.msg);
            }
            return;
        }

        if ('alert' == log.type) {
            aardio.alert(log.msg);
        } else {
            aardio.alert('SocketLog type error, ' + log.type);
        }
    });
})
aardio.on("status", (o) => {
    console.info(o)
    var status = document.getElementById("status")
    status.innerHTML = o;
})
let openFn = function() {
    aardio.showDevTools();
    aardio.connect(host.value, port.value, cid.value);
}
</script>

</html>